<template>
    <van-tree-select v-model:active-id="activeId" v-model:main-active-index="activeIndex" :items="items" height="100vh">
        <template #content>
            <div class="mainWarp" style="background:#f3f3f3">
                <ul class="proul">
                    <li v-for="item in items[activeIndex]?.children" :key="item.id">
                        <router-link :to="{ path: '/product/info', query: { proid: item.id } }">
                            <img :src="item.thumbs_text" />
                        </router-link>
                        <router-link :to="{ path: '/product/info', query: { proid: item.id } }">
                            <p class="tit">{{ item.name }}</p>
                        </router-link>
                        <div class="price">
                            <p>￥{{ item.price }}</p>
                        </div>
                    </li>
                </ul>
            </div>
        </template>
    </van-tree-select>
    <Footer />
</template>

<script setup>
import Footer from '@/components/common/footer.vue';
const { proxy } = getCurrentInstance()

const activeId = ref(1);
const activeIndex = ref(0);
const typelist = ref([]);
const list = ref([]);
const items = ref([]);

onBeforeMount(() => {
    getProductType()
})

const getProductType = async () => {
    let result = await Api.ProductType()
    if (result.code == 1) {
        typelist.value = result.data
        typelist.value.unshift({
            text: '全部分类',
            value: 0
        })
        for (let i = 0; i < typelist.value.length; i++) {
            let data = {
                typeid: typelist.value[i].value,
                flag: 0,
                order: 'createtime',
                sort: 'desc'
            }
            let result = await Api.ProductLists(data)
            if (result.code == 1) {
                list.value = result.data
            }
            items.value.push({
                text: typelist.value[i].text,
                children: list.value,
            })
        }
        console.log(items.value);
    }
}

</script>

<style scoped>

.mainWarp {
    padding-bottom: 40px;
}

</style>